// 全局样式

// 覆盖vant带自的导航栏的样式
.van-nav-bar {
  background-color: #3196fa;
  .van-nav-bar__title {
    color:#fff;
  }
}
#app {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

// .container是Layout.vue组件的根元素的类名
.container{
  width: 100%;
  height: 100%;
  // logo区域
  // .logo {
  //   background: url("../assets/logo.png") no-repeat;
  //   background-size: cover;
  //   width: 100px;
  //   height: 30px;
  // }
  // 搜索按钮
  .search-btn {
    background-color: #5babfb;
    width: 80px;
  }
}

// .index 是home/index.vue组件的根元素的类名
.index {
  height: 100%;
  // 让出顶部导航条的距离
  // 顶部在导航条是固定定位的
  padding-top:46px;
  // #app >.container >.index > .van-tabs > van-tabs__wrap + van-tabs__content
  .van-tabs {
    padding-top:50px; 
    display: flex;
    flex-direction: column;
    height: 100%;
    .van-tabs__wrap {
      position:fixed;
      top:46px; // 跟在顶部固定导航条的下方
      left:0px;
      right:30px; 
      // 标记当前选中频道的下划线
      .van-tabs__line {
        width: 30px !important;
        background-color: #3296fa;
        bottom: 20px;
      }
    }
    .van-tabs__content {
      flex:1;
      overflow: hidden;
      
      padding-bottom: 4rem;  // 能看到文章列表中的loading效果
      .van-tab__pane{ 
        height: 100%;
        // .scroll-wrapper 是home/ArticleList.vue组件的根元素的类名
        .scroll-wrapper {
          overflow:auto;
          height: 100%;
        }
      }
    }
  }
  // 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
}